import { useState } from 'react';
import CuboxHoudini from './CuboxHoudini';
import Cubox from './Cubox'; // Your existing SVG-based Cubox

/**
 * Integration example showing both SVG Cubox and Houdini Cubox side by side
 * This demonstrates the equivalent functionality and performance differences
 */
const CuboxHoudiniIntegration = () => {
  const [cornerRadius, setCornerRadius] = useState(20);
  const [isOutlined, setIsOutlined] = useState(false);
  const [backColor, setBackColor] = useState('#343434');
  const [foreColor, setForeColor] = useState('bisque');

  const commonProps = {
    cornerRadius,
    style: { 
      width: '200px', 
      height: '100px', 
      margin: '10px',
      display: 'flex', 
      alignItems: 'center', 
      justifyContent: 'center',
      color: isOutlined ? backColor : foreColor,
      fontWeight: 'bold'
    }
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
      <h1>Cubox Integration: SVG vs Houdini Paint API</h1>
      
      <div style={{ marginBottom: '20px' }}>
        <h2>Controls</h2>
        <div style={{ display: 'flex', gap: '20px', flexWrap: 'wrap', marginBottom: '20px' }}>
          <label>
            Corner Radius: {cornerRadius}
            <br />
            <input
              type="range"
              min="5"
              max="50"
              value={cornerRadius}
              onChange={(e) => setCornerRadius(Number(e.target.value))}
            />
          </label>
          
          <label>
            <input
              type="checkbox"
              checked={isOutlined}
              onChange={(e) => setIsOutlined(e.target.checked)}
            />
            Outlined
          </label>
          
          <label>
            Background Color:
            <br />
            <input
              type="color"
              value={backColor}
              onChange={(e) => setBackColor(e.target.value)}
            />
          </label>
          
          <label>
            Foreground Color:
            <br />
            <input
              type="color"
              value={foreColor}
              onChange={(e) => setForeColor(e.target.value)}
            />
          </label>
        </div>
      </div>

      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px', alignItems: 'flex-start' }}>
        <div>
          <h3>SVG-based Cubox (Original)</h3>
          <Cubox
            {...commonProps}
            isOutlined={isOutlined}
            backColor={backColor}
            foreColor={foreColor}
            strokeWidth={isOutlined ? 2 : 0}
          >
            SVG Cubox
          </Cubox>
          <p style={{ fontSize: '12px', color: '#666', maxWidth: '200px' }}>
            Uses SVG with dynamic path generation. Handles complex corner configurations 
            but requires JavaScript for path calculation.
          </p>
        </div>

        <div>
          <h3>Houdini Paint API Cubox (New)</h3>
          <CuboxHoudini
            {...commonProps}
            backgroundColor={isOutlined ? 'transparent' : backColor}
            borderWidth={isOutlined ? 2 : 0}
            borderColor={isOutlined ? foreColor : 'transparent'}
          >
            Houdini Cubox
          </CuboxHoudini>
          <p style={{ fontSize: '12px', color: '#666', maxWidth: '200px' }}>
            Uses CSS Paint API for GPU-accelerated rendering. Better performance 
            for animations and large numbers of elements.
          </p>
        </div>
      </div>

      <div style={{ marginTop: '40px' }}>
        <h2>Advanced Houdini Features</h2>
        <div style={{ display: 'flex', gap: '20px', flexWrap: 'wrap' }}>
          <CuboxHoudini
            cornerRadius={25}
            cornerSharpnessTopLeft={0}
            cornerSharpnessBottomRight={0}
            backgroundColor="#007bff"
            style={{ 
              width: '150px', 
              height: '80px', 
              display: 'flex', 
              alignItems: 'center', 
              justifyContent: 'center',
              color: 'white',
              fontSize: '12px'
            }}
          >
            Mixed Sharpness
          </CuboxHoudini>

          <CuboxHoudini
            cornerRadiusTopLeft={5}
            cornerRadiusTopRight={30}
            cornerRadiusBottomRight={5}
            cornerRadiusBottomLeft={30}
            backgroundColor="#28a745"
            style={{ 
              width: '150px', 
              height: '80px', 
              display: 'flex', 
              alignItems: 'center', 
              justifyContent: 'center',
              color: 'white',
              fontSize: '12px'
            }}
          >
            Individual Radii
          </CuboxHoudini>

          <CuboxHoudini
            cornerRadius={20}
            borderWidth={3}
            borderStyle="dashed"
            borderColor="#dc3545"
            backgroundColor="transparent"
            style={{ 
              width: '150px', 
              height: '80px', 
              display: 'flex', 
              alignItems: 'center', 
              justifyContent: 'center',
              color: '#dc3545',
              fontSize: '12px'
            }}
          >
            Dashed Border
          </CuboxHoudini>
        </div>
      </div>

      <div style={{ marginTop: '40px', padding: '20px', backgroundColor: '#f8f9fa', borderRadius: '8px' }}>
        <h3>Performance Comparison</h3>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '14px' }}>
          <thead>
            <tr style={{ borderBottom: '2px solid #dee2e6' }}>
              <th style={{ textAlign: 'left', padding: '8px' }}>Feature</th>
              <th style={{ textAlign: 'left', padding: '8px' }}>SVG Cubox</th>
              <th style={{ textAlign: 'left', padding: '8px' }}>Houdini Cubox</th>
            </tr>
          </thead>
          <tbody>
            <tr style={{ borderBottom: '1px solid #dee2e6' }}>
              <td style={{ padding: '8px' }}><strong>Rendering</strong></td>
              <td style={{ padding: '8px' }}>DOM-based SVG</td>
              <td style={{ padding: '8px' }}>GPU-accelerated Canvas</td>
            </tr>
            <tr style={{ borderBottom: '1px solid #dee2e6' }}>
              <td style={{ padding: '8px' }}><strong>Animation Performance</strong></td>
              <td style={{ padding: '8px' }}>Good (60fps)</td>
              <td style={{ padding: '8px' }}>Excellent (120fps+)</td>
            </tr>
            <tr style={{ borderBottom: '1px solid #dee2e6' }}>
              <td style={{ padding: '8px' }}><strong>Memory Usage</strong></td>
              <td style={{ padding: '8px' }}>Higher (DOM nodes)</td>
              <td style={{ padding: '8px' }}>Lower (painted pixels)</td>
            </tr>
            <tr style={{ borderBottom: '1px solid #dee2e6' }}>
              <td style={{ padding: '8px' }}><strong>Browser Support</strong></td>
              <td style={{ padding: '8px' }}>Universal</td>
              <td style={{ padding: '8px' }}>Modern browsers only</td>
            </tr>
            <tr>
              <td style={{ padding: '8px' }}><strong>Customization</strong></td>
              <td style={{ padding: '8px' }}>Full control</td>
              <td style={{ padding: '8px' }}>CSS properties only</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default CuboxHoudiniIntegration;
